/**
 * 首页样式文件
 * author ly
 */

.page-home {
	height: 100%;

	.page-3d{
		position:absolute;
		top:0;
		left: 0;
		bottom:0;
		right: 0;
		z-index: 1;
		background: url(../img/bg.png) center no-repeat;
		background-size: 100% 100%;
	}

	.menu-container{
		background:none;
	}

	.params-options{
		top: 120px;
		left: 60%;
		position:absolute;
		z-index: 9;
		background:rgba(0, 0, 0, 0.46);
		min-width: 160px;
		display: flex;
		padding:10px;
		border-radius:4px;
		overflow: hidden;

		li{
			width: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			.i-monitor{
				width: 8px;
				height: 8px;
				background: #15C3EC;
				border-radius:50%;
				margin-right: 4px;
			}

			.i-voc{
				width: 8px;
				height: 8px;
				background: #7EFF9C;
				border-radius:50%;
				margin-right: 4px;
			}
		}
	}

	.model-3d{
		position:absolute;
		bottom:60px;
		left: 38px;
		height: 52px;
		width: 52px;
		background:url("../img/model-3d.png") no-repeat;
		cursor: pointer;
		z-index: 99999;
	}

	.footer-ul-data{
		position:absolute;
		bottom:80px;
		width: 500px;
		left: calc(50% - 250px);
		background:rgba(0,0,0,0.42);
		z-index: 3;
		padding:6px 16px;
		justify-content: space-between;

		.label{
			opacity: 0.7;
		}

		.inline{
			margin-left: 10px;
			color:rgba(78, 224, 0, 1);
		}
	}

	.product-logo{
		position:absolute;
		bottom:65px;
		right: 30px;
		z-index: 4;
		width: 220px;
		height: 50px;
		background:url("../img/logo.png") right center no-repeat;
		background-size:100% auto;
	}

	.icon-show-aqi{
		position:absolute;
		width: 30px;
		height: 30px;
		top:140px;
		right: 0;
		z-index: 9;
		background: url(../img/show-aqi.png) no-repeat;
		cursor: pointer;
		display: none;
	}
	.show-aqi{
		display: inline;
	}
	.pop-up {
		width: 470px;
		height: 310px;
		background: url(../img/itme1.png) no-repeat;
		background-size: 100% 100%;
		top: 180px;
		left: 520px;
		display: none;
		padding-top:30px;
		z-index: 99;
		position:absolute;
		.open{
			width: 16px;
			height: 16px;
			position:absolute;
			top:15px;
			right: 5px;
		}
		.wifi-box{
			height: 30px;
			width: 100px;
			margin-left: 30px;
			.wifi-img{
				width: 16px;
				height: 19px;
				vertical-align: bottom;
			}
			.wifi-page{
				font-size: 14px;
				font-weight: 400;
				color: #00E0FF;
				text-align: center;
				margin-left: 5px;
			}
		}
		.item-content{
			display: flex;
			justify-content: space-between;
			.item-ul{
				font-size: 14px;
				font-weight: 500;
				color: #FFFFFF;
				margin-left: 30px;
				width: 270px;
				height: 200px;
				.item-li{
					padding: 10px 0 10px 0;
					.dian-img{
						width: 4px;
						height: 4px;
						background: #08DFFC;
						vertical-align: middle;
					}
					.item-span{
						padding: 0px 5px 0px 5px;
					}
					.item-du{
						margin-left: 10px;
					}
				}
			}
		}
		.item-img{
			width: 272px;
			height: 208px;
		}
	}

	.left-slider-box{
		position:absolute;
		width: 180px;
		height: calc(100% - 160px);
		left: 0;
		top:80px;
		z-index: 9;

		.put-away{
			left: 40px;
		}
	}

	.side-right {
		width: 520px;
		height: 650px;
		background: url(../img/itme2.png) no-repeat;
		background-size: 100% 100%;
		position: absolute;
		right: 20px;
		top:100px;
		transform: translateX(800px);
		transition: all 0.3s;
		opacity: 0;
		z-index: 99;
		display: flex;
		justify-content: center;
		.silder-right-body{
			width: 90%;
			height: 90%;
			position:relative;
			margin-top: 43px;
			.icon-hide-aqi{
				position:absolute;
				width: 30px;
				height: 30px;
				top:4px;
				right: -10px;
				z-index: 9;
				background: url(../img/hide-aqi.png) no-repeat;
				cursor: pointer;
			}

		}
		.tab-title{
			width: 100%;
			height: 160px;
			li{
				width: 25%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding-bottom:10px;

				i{
					margin-top: 10px;
					font-style: normal;
					padding-bottom:4px;
					border-bottom:3px solid rgba(255,255,255,0);
				}
			}
			li.on{
				.icon-control{
					background: url("../img/control-active.png") center no-repeat;
				}
				.icon-aqi{
					background: url("../img/aqi-active.png") center no-repeat;
				}
				.icon-road{
					background: url("../img/road-active.png") center no-repeat;
				}
				.icon-voc{
					background: url("../img/voc-active.png") center no-repeat;
				}
				i{
					border-bottom:3px solid #04B0E4;
					color:#04B0E4;
				}
			}

			.icon-control{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background: url("../img/control-default.png") center no-repeat;
				cursor: pointer;
			}
			
			.icon-aqi{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background: url("../img/aqi-default.png") center no-repeat;
				cursor: pointer;
			}
			
			.icon-road{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background: url("../img/road-default.png") center no-repeat;
				cursor: pointer;
			}
			
			.icon-voc{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background: url("../img/voc-default.png") center no-repeat;
				cursor: pointer;
			}
			
		}

		.tab-item-section{
			width: 100%;
			height: calc(100% - 180px);
			overflow: hidden;

			.content-box{
				height: 100%;
			}
			.type-ul{
				height: 160px;
				overflow: hidden;
				display: flex;
				transition: all 0.18s;
			}

			.history-data-title{
				height: 30px;
				display: flex;
				align-items:center;
				.filter-data{
					color:rgba(255,255,255,0.7);
					display: flex;
					align-items:center;
				}

				.date-button{
					cursor: pointer;
				}
			}

			.history-data{
				height: calc(100% - 190px);
			}
			.aqi-data-title,
			.road-data-title{
				height: 30px;
				display: flex;
				padding:0 26px 0 10px;
				color:#1ECAFF;
			}
			.road-data-title{
				padding:0;
			}

			.region{
				text-align: right;
				color:#fff;
			}
			.j-select-box{
				min-width: 100px;
				width: 100px;
				.j-select{
					background:none;
					&:after{
						background: url(../img/select-down.png) center 65% no-repeat;
					}
				}
				li{
					text-align: left;
				}
			}


			.moniter{
				text-align: right;
				color:#fff;
				margin-right: -10px;
			}

			.aqi-chart,
			.road-chart{
				height: calc(100% - 40px);
			}

			.content-box{
				height: 420px;
				display: flex;
				transition: all 0.3s;
			}

			.item{
				width: 100%;
				height: 100%;
			}

			.silder-title{
				height: 30px;
				display: flex;

				span{
					margin-right: 20px;
					cursor: pointer;
					color:rgba(255,255,255,0.5);
				}

				span.on{
					border-bottom:2px solid #fff;
					color:rgba(255,255,255,1);
				}
			}
		}

		.type-container{
			height: calc(100% - 30px);
			width: 100%;
			overflow: hidden;

			.detail{
				display: flex;
				flex-wrap: wrap;
				.cell{
					width: 32%;
					height: 78px;
					margin-left: 2%;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.label{
						color:rgba(255,255,255,0.8);
					}

					.value{
						margin-top: 6px;
						font-size: 20px;
					}
				}

				.danger{
					color:#F00000;
					margin-left: 4px;
				}
				.good{
					color:#4EE000;
				}
				.cell:nth-child(3n+1){
					margin-left: 0;
				}
			}
		}
	}
}

